<template>
	<view class="content">
		<u-swiper :list="swipers" @change="e => current = e.current" :autoplay="false" :radius="0" :height="218">
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in swipers" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view>
		</u-swiper>
		<view class="headersBody">
			<text class="title">{{info.name || ''}}({{info.time_num}}分钟/节)</text>
			<text class="price">￥<text class="money">{{info.salesprice || ''}}</text></text>
			<text class="content_text">此卡有效期只有一周，请在开卡后一周内上完</text>
		</view>
		<view class="BoxBody">
			<view class="u_flex">
				<text class="title">包含会员卡</text>
				<view class="flex">
					<text>查看课表</text>
					<u--image :showLoading="true" src="../../static/more.png" width="28rpx" height="28rpx"
						radius="0"></u--image>
				</view>
			</view>
			<text class="text-content">*包含以下会员卡，购买后将自动开通权限</text>
			<view class="member-card-container" v-if="info.course">
					<view class="card-top">
						<view>会员卡（包含课程）</view>
						<view>课时总数</view>
					</view>
				<view class="card-list">
					<view class="name">{{ info.course.name }}</view>
					<view class="line"></view>
					<view class="time">次数卡{{ info.max_num }}次</view>
				</view>
			</view>
		</view>
		<view class="ActiveFlex">
			<view class="headers">
				<view v-for="(item,index) in actives" :key="index"
					:style="{'border-bottom':active == index ? '4rpx solid #029CFE' : '4rpx solid transparent'}"
					@click="active = index">
					<text :style="{'color':active == index ? '#029CFE' : '#4C4C4C'}">{{item.name}}</text>
				</view>
			</view>
			<view class="New_content_text" v-show="active == 0">
				<text class="content_title">此卡有效期只有一周，请在开卡后一周内上完</text>
				<text class="content_tips">温馨提示</text>
				<view class="content_flex">
					<view class="content_left">
						<view></view>
						<text>活动名额有限，请购买后及时使用</text>
					</view>
					<view class="content_right">
						<view></view>
						<text>遇到任何问题请 联系客服</text>
					</view>
				</view>
			</view>
			<ShowBand v-show="active == 1"></ShowBand>
			<view class="lists" v-show="active == 2">
				<view class="tjian">
					<view v-for="(item,index) in 4" :key="index" class="list_Item_FLex">
						<u--image :showLoading="true" src="../../static/logo.png" width="158rpx" height="156rpx"
							radius="0"></u--image>
						<view class="list_Item_right">
							<text class="title">【1v1】试听课20分钟</text>
							<view class="list_tips_flex">
								<u--image :showLoading="true" src="../../static/logo.png" width="30rpx" height="22rpx"
									radius="0"></u--image>
								<text>会员卡</text>
							</view>
							<view class="bottom_Flex">
								<text>¥19.9</text>
								<button :style="{backgroundColor:$store.state.primaryColor}">查看</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="payBody">
			<view class="payleft">
				<u--image :showLoading="true" src="../../static/Home/kefu.png" width="44.4rpx" height="44.4rpx"
					radius="0"></u--image>
				<text>客服</text>
			</view>
			<button @click="linkUrl(`/pages/Order/Order?id=${info.id}`)" :style="{backgroundColor:$store.state.primaryColor}">立即购买</button>
		</view>
	</view>
</template>

<script>
	import {
		details,
		course_pay
	} from '../../api/Home.js';
	import ShowBand from "../compontent/showBand.vue";
	export default {
		components:{
			ShowBand
		},
		data() {
			return {
				swipers: [],
				actives: [{
					name: '内容详情'
				}, {
					name: '品牌介绍'
				}, {
					name: '相关推荐'
				}],
				info:{},
				active: 0,
				current: 0
			}
		},
		onLoad(options) {
			this.details(options.id);
		},
		methods: {
			/**
			@method 套餐详情
			**/
			async details(Id = null) {
				try {
					const res = await details({
						shop_id: 1,
						id: Id
					});
					this.info = {...res.data};
					this.swipers = res.data.images
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 购买课程
			**/
			async course_pay(Id = null) {
				try {
					const res = await course_pay({
						course_package_type: 1,
					});
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			linkUrl(e) {
				uni.navigateTo({
					url: e
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.content {
		.New_content_text{
			.content_title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #101010;
				display: block;
				margin-top:30rpx;
			}
			.content_tips{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				display: block;
				margin-top:10rpx;
				margin-bottom:20rpx;
			}
			.content_flex{
				
				.content_left{
					display: flex;
					align-items: center;
					margin-bottom:10rpx;
					view{
						width: 10rpx;
						height: 10rpx;
						border:4rpx solid #029CFE;
						border-radius:50%;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #8E8F8E;
						margin-left:5rpx;
						letter-spacing:2rpx;
					}
				}
				.content_right{
					display: flex;
					align-items: center;
					view{
						width: 10rpx;
						height: 10rpx;
						border:4rpx solid #029CFE;
						border-radius:50%;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #8E8F8E;
						margin-left:5rpx;
						letter-spacing:2rpx;
					}
				}
			}
		}
		.payBody {
			width: auto;
			padding: 20rpx 30rpx 20rpx 30rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.payleft {
				width: 100rpx;

				/deep/ .u-image {
					display: block;
					margin: 0px auto;
				}

				text {
					display: block;
					text-align: center;
				}
			}

			button {
				width: 340rpx;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #029CFE;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0px;
			}
		}

		.headersBody {
			width: auto;
			background-color: #fff;
			padding: 30rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #202020;
				display: block;
			}

			.price {
				font-family: '.SFNS, SFNS';
				font-weight: 400;
				font-size: 28rpx;
				color: #029CFE;
			}

			.money {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 48rpx;
				color: #029CFE;
			}

			.content_text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #888888;
				display: block;
				margin-top: 5rpx;
			}
		}

		.BoxBody {
			width: auto;
			background-color: #fff;
			padding: 30rpx;
			margin-top: 20rpx;

			.u_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #202020;
				}

				.flex {
					display: flex;
					align-items: center;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #8E8F8E;
						margin-right: 10rpx;
						display: block;
					}
				}
			}

			.text-content {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #8E8F8E;
				display: block;
				margin-top: 10rpx;
			}
			.member-card-container{
					margin-top: 34rpx;
					margin-bottom: 34rpx;
					font-weight: 500;
					color: #101010;
					font-size: 28rpx;
					.card-top{
						background: rgba(254,126,37,0.15);
						border-radius: 16rpx 16rpx 0rpx 0rpx;
						line-height: 64rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 64rpx 0 86rpx;

					}
				.card-list{
					line-height: 106rpx;
					display: flex;
					text-align: center;
					align-items: center;
					justify-content: space-between;
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					box-shadow: 0rpx 0rpx 16rpx 0px rgba(219,219,219,0.5);
					padding: 0 64rpx 0 86rpx;
					position: relative;
					white-space: nowrap;
					.name{
						width: 280rpx;
					}
					.line{
						position: absolute;
						width: 2rpx;
						height: 76rpx;
						background-color: #D0D0D0;
						right: 260rpx;
					}
					.time{
						width: 140rpx;
					}
				}
			}
		}

		.ActiveFlex {
			width: auto;
			background-color: #fff;
			padding: 30rpx;
			margin-top: 20rpx;

			.headers {
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					padding-bottom: 15rpx;
					border-bottom: 4rpx solid transparent;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #4C4C4C;
				}
			}
		}

		.lists {
			.tjian {

				.list_Item_FLex {
					width: auto;
					padding: 20rpx;
					display: flex;
					// align-items: center;
					margin-top: 20rpx;
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
					/* 添加阴影效果 */
					border-radius: 20rpx;

					.list_Item_right {
						width: 80%;
						// border:1px solid red;
						margin-left: 20rpx;

						.title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 28rpx;
							color: #333333;
						}

						.list_tips_flex {
							display: flex;
							align-items: center;
							margin-top: 5rpx;

							text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #888888;
								margin-left: 10rpx;
							}
						}

						.bottom_Flex {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 15rpx;

							text {
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								font-size: 28rpx;
								color: #029CFE;
							}

							button {
								width: 160rpx;
								height: 60rpx;
								margin: 0px;
								background-color: #029CFE;
								color: #fff;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 50rpx;
								font-size: 28rpx;
							}
						}
					}
				}
			}
		}
	}
</style>